﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="order-list">
      <div
        class="order-items"
        :class="listQuery.is_answer === 1 ? 'active' : ''"
        @click="stateChange(1)"
      >
        待回复
      </div>
      <div
        class="order-items"
        :class="listQuery.is_answer === 2 ? 'active' : ''"
        @click="stateChange(2)"
      >
        已回复
      </div>
      <div
        class="order-items"
        :class="listQuery.is_answer === '' ? 'active' : ''"
        @click="stateChange()"
      >
        全部
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-list">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255,255,255,0.2)"
          border
          fit
          highlight-current-row
          style="width: 100%min-height:1000px"
        >
          <el-table-column
            fixed="left"
            align="center"
            :label="$t('table.id')"
            width="65"
          >
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('goods.name_1')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('supplier.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.supplier_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.no')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.order_no }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.time')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('assess.score')"
          >
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.level).toFixed(1) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.status')"
          >
            <template slot-scope="scope">
              <span>{{ assessStatus(scope.row.is_answer) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('table.actions')"
            class-name="operat-button"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="read-img" @click="handleRead(scope.row)">
                <img src="@/assets/images/read@2x.png" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="200px"
          style="width: 400px margin-left:120px"
          size="small"
        >
          <div class="pops">
            <div class="pops-normal">
              <el-form-item :label="$t('assess.feedback') + ' :'">
                <el-input
                  type="textarea"
                  v-model="temp.content"
                  :autosize="{ minRows: 2, maxRows: 6 }"
                  :readonly="true"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="temp.is_answer === 1 || dialogStatus === 'edit'"
                :label="$t('assess.answer') + ' :'"
                prop="answer"
              >
                <el-input
                  type="textarea"
                  v-model="temp.answer"
                  :autosize="{ minRows: 2, maxRows: 6 }"
                  :readonly="dialogStatus === 'edit' ? false : true"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer between-space">
          <div>
            <el-button
              v-show="dialogStatus == 'read' && temp.is_answer !== 1"
              type="primary"
              @click="handleEdit"
              >回复</el-button
            >
          </div>
          <div>
            <el-button @click="dialogFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button
              v-if="dialogStatus == 'edit'"
              type="primary"
              :disabled="updateDisabled"
              @click="updateData"
              >{{ $t("table.confirm") }}</el-button
            >
            <el-button
              v-else
              type="primary"
              @click="dialogFormVisible = false"
              >{{ $t("table.confirm") }}</el-button
            >
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: "Itoc",
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        is_answer: ""
      },
      goods_id: undefined,
      supplier_id: undefined,
      temp: {
        id: undefined,
        content: "",
        answer: ""
      },
      rules: {
        answer: [{ required: true, message: "请填写回复", trigger: "blur" }]
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "新建排餐",
        review: "审核",
        read: "查看"
      },
      updateDisabled: false
    };
  },
  created() {
    if (this.$route.query.goods_id) {
      this.goods_id = this.$route.query.goods_id;
    }
    if (this.$route.query.supplier_id) {
      this.supplier_id = this.$route.query.supplier_id;
    }
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        goods_name: "",
        goods_date: ""
      };
      this.getList();
    },
    stateChange(status = "") {
      this.listQuery.is_answer = status;
      this.getList();
    },
    // 获取评价列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        goods_id: this.goods_id ? this.goods_id : "",
        supplier_id: this.supplier_id ? this.supplier_id : "",
        is_answer: this.listQuery.is_answer
      };
      const path = {
        app: "comment",
        api: "api_comment_index_getDetails",
        version: "1.0",
        type: 2,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleEdit() {
      this.dialogStatus = "edit";
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.updateDisabled) {
            this.updateDisabled = true;
            const path = {
              app: "comment",
              api: "api_comment_index_answer",
              version: "1.0",
              type: 2,
              data: {
                id: this.temp.id ? this.temp.id : "",
                answer: this.temp.answer ? this.temp.answer : ""
              }
            };
            this.socketApi.sendSock(JSON.stringify(path), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            });
          } else if (resj.api === "api_comment_index_getDetails") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "api_comment_index_answer") {
            this.$notify({
              title: "成功",
              message: "回复成功",
              type: "success",
              duration: 2000
            });
            this.dialogFormVisible = false;
            this.getList();
          }
        }
      }
    },
    cargoLane(id) {
      this.$router.push({
        path: "/terminal-data/cargo-lane-manag",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style scoped>
.order-list {
  display: flex;
  height: 64px;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 0 0;
  padding: 0 16px;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
}
.order-list .order-items {
  line-height: 1;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  position: relative;
}
.order-list .order-items:not(:first-child) {
  margin-left: 27px;
}
.order-list .active {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.order-list .active:after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: rgba(45, 65, 152, 1);
  border-radius: 2px;
  position: absolute;
  left: calc(50% - 15px);
  bottom: -13px;
}
</style>
